import Masonry from 'react-masonry-css'
import SyntaxHighlighter from '@/components/SyntaxHighlighter'

const code1 = `
  npm install react-masonry-css
`

const code2 = `
  import Masonry from 'react-masonry-css'

  function FourthView({ listData }) {
    const breakpointColumnsObj = {
      default: 4, // 默认4列
      1100: 3, // 屏幕<=1100px时显示3列
      700: 2, // 屏幕<=700px时显示2列
      500: 1 // 屏幕<=500px时显示1列
    }

    return (
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        { listData.map(item => 
          <img key={item} src={item} />
        ) }
      </Masonry>
    )
  }  
`

const code3 = `
  .my-masonry-grid {
    display: flex;
    margin-left: -10px; /* 抵消内列间距 */
    width: auto;
    img {
      width: 100%;
      vertical-align: top;
      margin-bottom: 10px;
    }
  }
  .my-masonry-grid_column {
    padding-left: 10px; /* 内列间距 */
    background-clip: padding-box;
  }
`

function FourthView({ listData }) {
  const breakpointColumnsObj = {
    default: 4, // 默认4列
    1100: 3, // 屏幕<=1100px时显示3列
    700: 2, // 屏幕<=700px时显示2列
    500: 1 // 屏幕<=500px时显示1列
  }

  return (
    <>
      <h3>react-masonry-css</h3>
      <SyntaxHighlighter language="json" children={code1} />
      <SyntaxHighlighter children={code2} />
      <SyntaxHighlighter language="css" children={code3} />
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        { listData.map(item => 
          <img key={item} src={item} />
        ) }
      </Masonry>
    </>
  )
}

export default FourthView